<template>
  <div>
    <el-container>
      <el-aside class="me-area" style="background: transparent">
        <ul class="me-data-list">
          <li class="me-data-notice">
            <el-badge :value="dataCount.systemCount">
              <el-button @click="changeNoticeInfo(1)" size="small"
                >系统公告
              </el-button>
            </el-badge>
          </li>
          <li class="me-data-notice">
            <el-badge :value="dataCount.tenderCount">
              <el-button @click="changeNoticeInfo(2)" size="small"
                >标案公告
              </el-button>
            </el-badge>
          </li>
        </ul>
      </el-aside>

      <el-main>
        <div>
          <div class="me-data-title">
            <h1>{{ currentTitle }}</h1>
          </div>
          <div>
            <el-timeline>
              <el-timeline-item
                v-for="(notice, index) in notices"
                id="timeline"
                :key="notice.id"
                color="deepskyblue"
                placement="top"
                v-bind:timestamp="notice.updateTime"
              >
                <div class="notice-box-card">
                  <a
                    class="text"
                    @click="view(notice.id)"
                    style="margin-left: 10px; float:left"
                    >{{ ++index }}、{{ notice.ntitle }}</a
                  >
                  <div style="float:left; margin-left:30px">
                    <el-tag
                      type="success"
                      style="margin-left: 10px"
                      >{{ notice.type === 1 ? "系统" : "标案" }}</el-tag
                    >
                    <el-tooltip
                      effect="light"
                      style="margin-left: 20px"
                    >
                      <div slot="content">浏览量: {{ notice.viewCounts }}</div>
                      <a>
                        <svg-icon icon-class="reading" />
                        {{ notice.viewCounts }}
                      </a>
                    </el-tooltip>
                  </div>
                </div>
              </el-timeline-item>

              <div class="home-page">
                <el-pagination
                  :current-page="paging.current"
                  :page-size="paging.size"
                  :total="paging.total"
                  layout="total,prev, pager, next"
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                >
                </el-pagination>
              </div>
            </el-timeline>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getNoticeCount, listAnnouncement } from "@/api/home";

export default {
  name: "NoticeInfo",

  created() {
    this.getCounts();
    let paramType = parseInt(this.$route.params.type);
    if (paramType === 1 || paramType === 2) {
      this.changeNoticeInfo(paramType);
    } else {
      this.changeNoticeInfo(1);
    }
  },
  data() {
    return {
      dataCount: {
        systemCount: 0,
        tenderCount: 0,
      },
      type: 1,
      currentTitle: "",
      paging: {
        total: 0,
        current: 1,
        size: 10,
      },
      notices: [],
    };
  },

  methods: {
    getCounts() {
      getNoticeCount().then((res) => {
        this.dataCount = res.data;
      });
    },
    changeNoticeInfo(type) {
      this.type = type;
      const form = {
        page: this.paging.current,
        pageSize: this.paging.size,
        type: type,
      };
      if (type === 1) {
        this.currentTitle = "系统公告";
      } else {
        this.currentTitle = "标案公告";
      }
      // 清空数据 this.notices
      this.notices = [];
      listAnnouncement(form)
        .then(({ data }) => {
          this.notices = data.homeAnnouncements;
          //this.paging.size = data.size
          this.paging.total = data.totalCount;
        })
        .catch((err) => {
          // 如果没有数据就显示为空
          this.notices = [];
          // 返还每页显示的条数
          this.paging.total = 0;
        });
    },
    view(id) {
      this.$router.push({ path: `/viewNotice/${id}` });
    },

    handleSizeChange(val) {
      this.paging.current = 1;
      this.paging.size = val;
      this.changeNoticeInfo(this.type);
    },
    handleCurrentChange(val) {
      this.paging.current = val;
      this.changeNoticeInfo(this.type);
    },
  },
};
</script>

<style scoped>
.el-container {
  width: 800px;
}

.el-aside {
  position: fixed;
  left: 100px;
  width: 150px !important;
}

.el-main {
  padding: 0px;
  line-height: 16px;
  margin-left: 10%;
}

.me-data-list {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: center;
  list-style-type: none;
}

.me-data-notice {
  margin-top: 18px;
  padding: 4px;
  font-size: 18px;
  color: #5fb878;
}

.me-order-list {
  float: right;
}

.me-data-title {
  margin-left: 4px;
  margin-bottom: 12px;
}

.el-pagination {
  position: relative;
  margin-top: 20px;
}

.notice-box-card {
  background-color: white;
  padding-bottom: 0px;
  height: 50px;
  border-radius: 6px;
  line-height: 50px;
}

.notice-box-card:hover {
  -webkit-box-shadow: #ccc 0px 10px 10px;
  -moz-box-shadow: #ccc 0px 10px 10px;
  box-shadow: #ccc 0px 10px 10px;
}

.text {
  width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-page {
  
  text-align: center;
}
</style>
